import 'package:curved_labeled_navigation_bar/curved_navigation_bar.dart';
import 'package:curved_labeled_navigation_bar/curved_navigation_bar_item.dart';
import 'package:flutter/material.dart';

//  通过curved_labeled_navigation_bar封装的底部导航栏组件
class CurvedLabeledNavigationBar extends StatefulWidget {
  // tab索引改变时触发的回调函数
  final ValueChanged<int>? onPageChanged;
  // 设置tab背景色
  final Color? tabBgcColor;
  // 设置选中tab的标签背景色
  final Color? selectTabTagBgcColor;
  // 设置选中的tab栏的颜色
  final Color? selectTabColor;

  const CurvedLabeledNavigationBar({super.key, this.onPageChanged, this.tabBgcColor, this.selectTabTagBgcColor, this.selectTabColor});
 
  @override
  State<CurvedLabeledNavigationBar> createState() =>
      _CurvedLabeledNavigationBarState();
}

class _CurvedLabeledNavigationBarState
    extends State<CurvedLabeledNavigationBar> {
  // 当前选中的tab索引
  int _page = 0;
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return CurvedNavigationBar(
        // 唯一标识组件的标识符
        key: _bottomNavigationKey,
        items: [
          CurvedNavigationBarItem(
            child: Icon(
              Icons.home,
              color: _page == 0 ? Colors.white : Colors.black, // 根据当前页设置颜色
            ),
            label: '首页',
            labelStyle:TextStyle(
              color:_page == 0 ? Colors.white : Colors.black, 
            fontSize: 12)
            
          ),
          CurvedNavigationBarItem(
            child: Icon(
              Icons.search,
              color: _page == 1 ? Colors.white : Colors.black, // 根据当前页设置颜色
            ),
            label: '搜索',
            labelStyle:TextStyle(
              color:_page == 1 ? Colors.white : Colors.black, 
            fontSize: 12)
          ),
          CurvedNavigationBarItem(
            child: Icon(
              Icons.info,
              color: _page == 2 ? Colors.white : Colors.black, // 根据当前页设置颜色
            ),
            label: '资讯',
            labelStyle:TextStyle(
              color:_page == 2 ? Colors.white : Colors.black, 
            fontSize: 12)
          ),
          CurvedNavigationBarItem(
            child: Icon(
              Icons.account_circle,
              color: _page == 3 ? Colors.white : Colors.black, // 根据当前页设置颜色
            ),
            label: '我的',
            labelStyle:TextStyle(
              color:_page == 3 ? Colors.white : Colors.black, 
            fontSize: 12)
          ),
        ],
        onTap: (index) {
          // 修改索引值
          setState(() {
            _page = index;
          });
          // tab索引改变时触发回调
          if (widget.onPageChanged != null) {
            widget.onPageChanged!(_page);
          }
        },
        // 设置背景颜色
        color: widget.tabBgcColor ?? Colors.white,
        // 可选：设置选中按钮的颜色
        buttonBackgroundColor: widget.selectTabColor,
        // 可选：设置当前选中的标签颜色
        backgroundColor: widget.selectTabTagBgcColor ?? Colors.blueAccent,
        // backgroundColor: Colors.transparent, // 可根据需求调整透明度

    );
  }
}
